<template>
  <div class="headerNavbar">
    <div class="left">
<!--      <div class="title">用户管理 User management</div>-->
      <div class="title">{{ titleText }}</div>
    </div>
    <div class="right">
<!--      <div class="content" v-if="isShow">-->
<!--        <div class="carImg"><img src="/img/auditS.png" alt=""></div>-->
<!--        <div class="text_content">-->
<!--          <div class="title">审核信息</div>-->
<!--          <div class="two">微信用户录入的信息审核</div>-->
<!--        </div>-->
<!--        <div class="num">{{ reviewedTotalNum }}</div>-->
<!--        <div class="rightArrows el-icon-right" @click="goSH" v-if="listBtn"></div>-->
<!--      </div>-->
      <div class="icon">
        <div class="quit" @click="LoguotUser"><img src="/img/quit.png" alt=""></div>
        <el-dropdown>

          <span class="el-dropdown-link">
            <div class="header"><img :src="userUrl!='' ? userUrl : '/img/tx.png' " alt=""></div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" @click.native="editPass">修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <div v-if="diaIsShow">
      <el-dialog width="500px" title="修改密码" :visible="true" :before-close="handleClose">
        <el-form>
          <el-form-item label="新密码">
            <el-input v-model="newPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="affirmPassword" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="diaIsShow = false;newPassword='';affirmPassword=''">取 消</el-button>
          <el-button type="primary" @click="confirmPass">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {LoguotUser, reviewedTotal, editPassword} from "@/api";
import {removeToken} from "@/utils/auth";

export default {
  name: "index",
  props: ['titleText'],
  data() {
    return {
      isShow: true,
      reviewedTotalNum:'',
      diaIsShow: false,
      newPassword:'',
      affirmPassword:'',
      userUrl:'',
      listBtn:false
    }
  },
  mounted() {
    // this.reviewedTotalList()

    // console.log('地址路径', this.title)
    if (this.$route.path == '/home/home') {
      this.isShow = false
    }
    // console.log(sessionStorage.getItem('userUrl'))
    setTimeout(()=>{
      this.getBtns()

      this.userUrl = sessionStorage.getItem('userUrl')

    },500)

  },
  methods: {

    // 按钮权限
    getBtns(){
      // let UserManager = JSON.parse(sessionStorage.getItem('BtnPermission'))
      // for (var i = 0; i < UserManager.length; i++) {
      //   var name = UserManager[i];
      //   // console.log(name);
      //   switch (name) {
      //     case 'messageAudit':
      //       this.listBtn=true;
      //       break;
      //   }
      // }
    },
    LoguotUser(){
      this.$confirm('此操作将退出系统登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await LoguotUser({}).then(res=>{
          if (res.result==0){
            removeToken()
            window.sessionStorage.removeItem('BtnPermission')
            this.$message({
              message: '成功退出登录!!',
              type: 'success'
            });
            this.$router.push('/')

          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    // 待审核和信息统计
    async reviewedTotalList(){
      await reviewedTotal({}).then(res=>{
        // console.log(res)
        this.reviewedTotalNum = res.data
      })
    },
    // 修改密码
    async confirmPass(){
      // this.$router.push('/')
      if(this.newPassword.trim()=='' && this.affirmPassword.trim()==''){
        this.$message({
          message: '请输入密码',
          type: 'warning'
        });
        return false
      }
      if(this.newPassword != this.affirmPassword){
        this.$message({
          message: '两次密码不一致,请重新输入',
          type: 'warning'
        });
        return false
      }
      await editPassword({
        password:this.affirmPassword
      }).then(res=>{
        // console.log(res)
        // this.reviewedTotalNum = res.data
        if(res.result == 0){
          this.$router.push('/')
        }else{
          this.$message({
            message: '修改失败',
            type: 'warning'
          });
        }
      })
    },
    // 修改密码
    editPass(){
      this.diaIsShow = true
      // console.log(e)
    },
    handleClose(){
      this.diaIsShow = false
    },
    goSH(){
      this.$router.push('/messageAudit/messageAudit')
    }
  }
}
</script>

<style scoped lang="less">
  .headerNavbar{
    width: 100%;
    height: 70px;
    //background: pink;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    .left{
      .title{
        font-size: 26px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
      }
    }
    .right{
      display: flex;
      align-items: center;
      .content{
        background: #FFFFFF;
        border-radius: 34px;
        height: 68px;
        //text-align: center;
        padding: 10px 50px 10px 30px;
        display: flex;
        align-items: center;
        .carImg{
          width: 70px;
          img{
            width: 100%;
          }
        }
        .text_content{
          title{
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #000000;
            line-height: 28px;
          }
          .two{
            font-size: 12px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #000;
            line-height: 17px;
          }
        }
        .num{
          font-size: 26px;
          font-family: 'Helvetica-Bold, Helvetica';
          font-weight: bold;
          margin: 0 50px;
        }
        .rightArrows{
          width: 34px;
          height: 34px;
          background: #F3BA61;
          border-radius: 10px;
          text-align: center;
          line-height: 34px;
          color: #fff;
          //img{
          //  width: 100%;
          //  height: 110%;
          //}
        }
      }
      .icon{
        margin-left: 65px;
        display: flex;
        align-items: center;
        .quit{
          width: 50px;
          height: 50px;
          background: #FFFFFF;
          border-radius: 10px;
          padding: 15px;
          img{
            width: 20px;
            height: 20px;
          }
        }
        .header{
          width: 68px;
          height: 68px;
          //background: red;
          margin-left: 35px;
          border-radius: 50%;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
